<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
        offset="50"
      >
        <ArticleItem v-for="item in list" :key="item.art_id"
        :listarr="item" @feedbackid="feedId" @reportArr="reportni">
        </ArticleItem>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import ArticleItem from '@/views/Home/components/ArticleItem.vue'
import { getAllArticleListAPI, feedbackAPI, reportAPI } from '@/api/index.js'
import { Notify } from 'vant'
export default {
  name: 'ArticleList',
  props: {
    activeId: Number
  },
  data () {
    return {
      list: [], // 文章列表数组
      loading: false, // 底部加载状态
      finished: false, // 底部完成状态
      theTime: new Date().getTime(), // 当前时间戳
      isLoading: false
    }
  },
  async created () {
    this.getArticleListFn()
  },
  components: { ArticleItem },
  methods: {
    // 发请求
    async getArticleListFn () {
      const { data: res } = await getAllArticleListAPI({
        channel_id: this.activeId,
        timestamp: this.theTime
      })
      console.log(res)
      this.list = [...this.list, ...res.data.results]
      this.theTime = res.data.pre_timestamp
      this.loading = false // 如果不关闭,底部一直是加载中的状态，下次触低会再一次触发
      if (this.theTime === null) {
        this.finished = true
      }
      this.isLoading = false
    },
    async onLoad () {
      if (this.list.length === 0) {
        this.loading = false
        return
      }
      this.getArticleListFn()
    },
    // 下拉刷新
    async onRefresh () {
      this.list = []
      this.theTime = new Date().getTime()
      this.getArticleListFn()
    },
    // 用户反馈
    async feedId (id) {
      // console.log(id)
      // 如果用try+catch自己处理错误，内部throw就不会向控制台打印错误
      // 而交给你catch内自定义错误
      // try  +catch 捕获同步代码异常 try {

      await feedbackAPI({ ardId: id })
      Notify({ type: 'success', message: '反馈成功' })
    },
    // 用户举报
    async reportni (arr) {
      // console.log(arr)
      await reportAPI({
        ardId: arr.essayId, // 文章ID
        typeId: arr.typeids, // 举报类型ID
        remarkSm: '无' // 其他问题 的附加说明
      })
      Notify({ type: 'success', message: '举报成功' })
    }
  }

}
</script>
